<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登陆/注册</title>
		<link rel="stylesheet" href="css/header.css" />
		<link rel="stylesheet" type="text/css" href="css/footer.css" />
		<style>
			.login_content {
				width: 800px;
				margin: 50px auto 100px;
				border: 1px solid gainsboro;
				border-top: 6px solid #96d610;
			}
			
			.login_content h5 {
				font-size: 20px;
				color: #96d610;
				text-align: center;
				width: 95%;
				margin: 20px auto;
				padding-bottom: 20px;
				border-bottom: 1px solid gainsboro;
			}
			
			.login_content label:not(:last-of-type) {
				display: block;
				/*text-align: center;*/
				padding-top: 20px;
				padding-right: 50px;
				position: relative;
				margin-left: 150px;
			}
			
			.login_content label:not(:last-of-type) span:first-child {
				display: inline-block;
				width: 100px;
				padding-right: 20px;
				text-align: right;
			}
			
			.login_content label:not(:last-of-type) input {
				vertical-align: middle;
				width: 275px;
				height: 36px;
				font-size: 14px;
				padding-left: 5px;
				box-sizing: border-box;
			}
			
			.login_content label:not(:last-of-type) input:focus {
				outline: none;
				border: 2px solid #96d610;
			}
			
			.login_content label #identifying_code {
				box-sizing: content-box;
				/*float: right;*/
				width: 120px;
				position: absolute;
				bottom: -2px;
				background-color: #96d610;
				border: 0;
				text-align: center;
				padding: 2px 0;
				color: white;
				border-radius: 2px;
				margin-left: 10px;
				cursor: pointer;
			}
			
			.login_content label:last-of-type {
				display: block;
				/*text-align: center;*/
				padding-top: 20px;
				margin-left: 270px;
				font-size: 14px;
			}
			
			.login_content label:last-of-type input {
				width: 15px;
				height: 15px;
				vertical-align: middle;
				padding-right: 10px;
			}
			
			.login_content p {
				width: 275px;
				background-color: #96d610;
				text-align: center;
				color: white;
				border-radius: 20px;
				margin-left: 270px;
				margin-top: 30px;
				margin-bottom: 80px;
				padding: 10px 0;
				cursor: pointer;
			}
		</style>
	</head>

	<body ng-app="myApp" ng-controller="myCtrl">
		<div ng-include="'header.html'"></div>
		<div class="login_content">
			<h5>欢迎注册</h5>
			<label for=""><span>用户名</span><input placeholder="建议输入使用手机号" type="text" /></label>
			<label for=""><span>设置密码</span><input placeholder="数字+字母" type="text" /></label>
			<label for=""><span>确认密码</span><input placeholder="请再次输入密码" type="text" /></label>
			<label for=""><span>手机验证码</span><input placeholder="建议输入手机验证码" type="text" /><input id="identifying_code" ng-model="paracont" ng-click="changeTime()" readonly="readonly" type="text" /></label>
			<label for=""><input type="checkbox" /> 阅读并同意《用户注册协议》《隐私协议》</label>
			<p>立即注册</p>
		</div>
		<div ng-include="'footer.html'"></div>
	</body>
	<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope, $http, $interval) {
			$scope.paracont = "获取验证码";
			var flag = true;
			$scope.changeTime = function() {
				if(flag) {
					var second = 60,
						timePromise = $interval(function() {
							if(second <= 0) {
								$interval.cancel(timePromise);
								timePromise = undefined;
								second = 60;
								$scope.paracont = "获取验证码";
								flag = true;
							} else {
								$scope.paracont = second + "秒后可重发";
								second--;
								flag = false;
							}
						}, 1000);
				}

			}

		})
	</script>

</html>